//--------------------------------------定义上边 top窗体----------------------------
var north = new Ext.Panel({
			title : 'north',
			region : 'north',
			split : true,
			border : true,
			collapsible : true,
			height : 80,
			minSize : 100,
			maxSize : 120
		});

//--------------------------------------定义右边 east窗体----------------------------
var east = new Ext.Panel({
			title : 'east',
			region : 'east',
			split : true,
			border : true,
			collapsible : true,
			width : 100,
			minSize : 100,
			maxSize : 120
		});

//--------------------------------------定义下边south窗体----------------------------

var south = new Ext.Panel({
			title : 'south',
			region : 'south',
			split : false,
			border : true,
			height : 80,
			collapsible : true
		});
var center = new Ext.tab.Panel({
	title : 'center',
	region : 'center',
	 defaults:{autoScroll:true},  
	 //渲染出所有的tab
	 deferredRender:false,
	split : false,
	border : false,
	collapsible : true,
	html : '<iframe id="target" style="width:100%;height:100%;border:none;"></iframe>'
});

//--------------------------------------定义左边 west 窗体----------------------------

var articletreeStore = Ext.create('Ext.data.TreeStore', {
			autoLoad : true,
			//model : 'colum',
			proxy : {
				actionMethods : {
						read : 'post'
					},
				type : 'ajax',
				//url : 'js/treejson/articletest.json',
				url:'/test/column/columnlist.do',
				reader : {
					type : 'json',
					root : 'columnlist'
					// record: 'node'
					
				},
				 //传参  
                extraParams : {  
                    parentID : ''  
                }  
			},
			//sorters : [{
			//			property : 'leaf',
			//			direction : 'ASC'
			//		}],
			root : {
				//nodeType : 'async',
				text : '管理菜单',
				//id: '00',
				expanded : true
			},
			 listeners : {  
            'beforeexpand' : function(node,eOpts){  
        //点击父亲节点的菜单会将节点的id通过ajax请求，将到后台  
                this.proxy.extraParams.parentID = node.raw.rootid;  
            }  
        }  
    
		});
		//菜单管理
		var columnStore = Ext.create('Ext.data.TreeStore', {
			autoLoad : true,
			//model : 'colum',
			proxy : {
				actionMethods : {
						read : 'post'
					},
				type : 'ajax',
				//url : 'js/treejson/articletest.json',
				url:'/test/column/columnlist.do',
				reader : {
					type : 'json',
					root : 'columnlist'
					// record: 'node'
					
				},
				 //传参  
                extraParams : {  
                    parentID : '4'  
                }  
			},
			//sorters : [{
			//			property : 'leaf',
			//			direction : 'ASC'
			//		}],
			root : {
				//nodeType : 'async',
				text : '管理菜单',
				//id: '00',
				expanded : true
			},
			 listeners : {  
            'beforeexpand' : function(node,eOpts){  
        //点击父亲节点的菜单会将节点的id通过ajax请求，将到后台  
                this.proxy.extraParams.parentID = node.raw.rootid;  
            }  
        }  
    
		});
		
		var treeStore1 = Ext.create('Ext.data.TreeStore', {
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : 'js/treejson/test.json',
				reader : {
					type : 'json',
					root : 'children'
					// record: 'node'
				}
			},
			sorters : [{
						property : 'leaf',
						direction : 'ASC'
					}],
			root : {
				nodeType : 'async',
				text : '中国',
				//id: '00',
				expanded : true
			}
		});
		
		var usersStore = Ext.create('Ext.data.TreeStore', {
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : 'js/treejson/users.json',
				reader : {
					type : 'json',
					root : 'children'
					// record: 'node'
				}
			},
			sorters : [{
						property : 'leaf',
						direction : 'ASC'
					}],
			root : {
				nodeType : 'async',
				text : '用户管理',
				//id: '00',
				expanded : true
			}
		});
var treepanel1 = Ext.create('Ext.tree.TreePanel', {
	//如果超出范围带自动滚动条
	autoScroll : true,
	//animate:true,
	//root:root,
	//默认根目录不显示
	rootVisible : true,
	border : false,
	animate : true,
	lines : true,
	//enableDD:true,
	height : 600,
	store : treeStore1
		//width: 500
		//containerScroll:true   
	});
var treepanel2 = Ext.create('Ext.tree.Panel', {
	//title: '简单的树形组件',
	store : treeStore1,
	animate : true,
	autoScroll : true, //如果超出范围带自动滚动条
	width : 500,
	height : 400,
	border : true, //显示tree side frame
	//数据容器
	//loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
	rootVisible : true, //是否显示根节点
	// renderTo: Ext.getBody()
	containerScroll : true,
	listeners : {
		'itemclick' : function(view, record) {
			var leaf = record.get('leaf');
			var modelData = record.raw;
			if (leaf) {
				//alert('is leaf!');
				//获取节点的data的值
				//alert("asas:"+record.get('id'));
				var id = record.get('id');
				if (Ext.getCmp(id)){
					center.setActiveTab(id);
				}
				else
					//document.getElementById('target').src = record.raw.url;
					//alert("vvvv:"+record.raw.url);
				 //this.getUpdater().refresh();  
					n = center.add({
						'id' : record.raw.id,
						'title' : record.raw.text,
						closable : true, // 通过html载入目标页 
						layout : 'fit',

						html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
								+ record.raw.url + '"></iframe>'
					});

			} else {
				//alert('not leaf!');
				var expand = record.get('expanded');
				//alert(expand);
				if (expand) {
					view.collapse(record);
				} else {
					view.expand(record);
				}
			}
		}
	} //listeners -------funcation end----------
});

//文章管理
var articletreenode = Ext.create('Ext.tree.Panel', {
	//title: '简单的树形组件',
	store : articletreeStore,
	animate : true,
	autoScroll : true, //如果超出范围带自动滚动条
	width : 500,
	height : 400,
	border : true, //显示tree side frame
	//数据容器
	//loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
	rootVisible : true, //是否显示根节点
	// renderTo: Ext.getBody()
	containerScroll : true,
	listeners : {
		'itemclick' : function(view, record) {
			var leaf = record.get('leaf');
			var modelData = record.raw;
			if (leaf) {
				//alert('is leaf!');
				//获取节点的data的值
				//alert("asas:"+record.get('id'));
				var id = record.get('id');
				if (Ext.getCmp(id)){
					center.setActiveTab(id);
				}
				else
					//document.getElementById('target').src = record.raw.url;
					//alert("vvvv:"+record.raw.url);
				 //this.getUpdater().refresh();  
					n = center.add({
						'id' : record.raw.id,
						'title' : record.raw.text,
						closable : true, // 通过html载入目标页 
						layout : 'fit',

						html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
								+ record.raw.url + '"></iframe>'
					});

			} else {
				//alert('not leaf!');
				var expand = record.get('expanded');
				//alert(expand);
				if (expand) {
					view.collapse(record);
				} else {
					view.expand(record);
				}
			}
		}
	} //listeners -------funcation end----------
});
//用户管理
var usersnode = Ext.create('Ext.tree.Panel', {
	//title: '简单的树形组件',
	store : usersStore,
	animate : true,
	autoScroll : true, //如果超出范围带自动滚动条
	width : 500,
	height : 400,
	border : true, //显示tree side frame
	//数据容器
	//loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
	rootVisible : true, //是否显示根节点
	// renderTo: Ext.getBody()
	containerScroll : true,
	listeners : {
		'itemclick' : function(view, record) {
			var leaf = record.get('leaf');
			var modelData = record.raw;
			if (leaf) {
				//alert('is leaf!');
				//获取节点的data的值
				//alert("asas:"+record.get('id'));
				var id = record.get('id');
				if (Ext.getCmp(id)){
					center.setActiveTab(id);
				}
				else
					//document.getElementById('target').src = record.raw.url;
					//alert("vvvv:"+record.raw.url);
				 //this.getUpdater().refresh();  
					n = center.add({
						'id' : record.raw.id,
						'title' : record.raw.text,
						closable : true, // 通过html载入目标页 
						layout : 'fit',

						html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
								+ record.raw.url + '"></iframe>'
					});

			} else {
				//alert('not leaf!');
				var expand = record.get('expanded');
				//alert(expand);
				if (expand) {
					view.collapse(record);
				} else {
					view.expand(record);
				}
			}
		}
	} //listeners -------funcation end----------
});

//菜单管理
var columnsnode = Ext.create('Ext.tree.Panel', {
	//title: '简单的树形组件',
	store : columnStore,
	animate : true,
	autoScroll : true, //如果超出范围带自动滚动条
	width : 500,
	height : 400,
	border : true, //显示tree side frame
	//数据容器
	//loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
	rootVisible : true, //是否显示根节点
	// renderTo: Ext.getBody()
	containerScroll : true,
	listeners : {
		'itemclick' : function(view, record) {
			var leaf = record.get('leaf');
			var modelData = record.raw;
			if (leaf) {
				//alert('is leaf!');
				//获取节点的data的值
				//alert("asas:"+record.get('id'));
				var id = record.get('id');
				if (Ext.getCmp(id)){
					center.setActiveTab(id);
				}
				else
					//document.getElementById('target').src = record.raw.url;
					//alert("vvvv:"+record.raw.url);
				 //this.getUpdater().refresh();  
					n = center.add({
						'id' : record.raw.id,
						'title' : record.raw.text,
						closable : true, // 通过html载入目标页 
						layout : 'fit',

						html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'
								+ record.raw.url + '"></iframe>'
					});

			} else {
				//alert('not leaf!');
				var expand = record.get('expanded');
				//alert(expand);
				if (expand) {
					view.collapse(record);
				} else {
					view.expand(record);
				}
			}
		}
	} //listeners -------funcation end----------
});

var west = new Ext.Panel({
			collapsible : true, //自动收缩按钮 
			split : true,
			border : false,
			width : 225,
			layout : "accordion",
			//extraCls:"roomtypegridbbar",  //添加动画效果
			layoutConfig : {
				animate : true
			},
			region : "west",
			title : '自己系统',
			items : [{
						title : "<b>生产系统模块</b>",
						autoScroll : true,
						items : [treepanel2],
						iconCls : "hotelmanageicon"
					}, {
						title : "<b>文章系统模块</b>",
						autoScroll : true,
						iconCls : "hotelmanageicon",
						items:[articletreenode]
				}	, {
						title : "<b>用户管理</b>",
						autoScroll : true,
						iconCls : "hotelmanageicon",
						items:[usersnode]
				},	
				{
						title : "<b>菜单管理</b>",
						autoScroll : true,
						iconCls : "hotelmanageicon",
						items:[columnsnode]
				}, {
						iconCls : "gonggao",
						title : "<b><span style='color:red';>Hotel Notice</span></b>"
						//items:[publishinfosgrid]
					}]
		});

Ext.onReady(function() {
			//定义树形组件
			//Ext.Msg.alert('提示信息', '学习EXTJS');

			var vp = new Ext.Viewport({
						layout : "border",
						items : [north, east, center, west, south]
					});
		});